<template>
  <div class="register">
    <div class="standard-container standard-grid --padding-horizontal --auto-rows">
      <div class="register__container">
        <div class="register__logo">
          <img src="../assets/imgs/icons/music.svg" alt="">
        </div>
        <div class="register__form">
          <div>
            <label for="">邮箱：</label>
            <input type="email" placeholder="请输入您得电子邮箱" v-model="emailValue" />
          </div>
          <div>
            <label for="">密码：</label>
            <input type="password" :placeholder="passwordMessage" v-model="passwordValue" />
          </div>
        </div>
        <div class="register__button">
          <button @click="registerEmail">邮箱注册</button>
          <!--<button>手机注册</button>-->
        </div>
        <p>还没有账号？赶快去 <nuxt-link to="/login">登录</nuxt-link></p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {getData} from "../module/axios";

  @Component({})

  export default class Register extends Vue {
    private emailValue=''
    private passwordValue=''
    private passwordMessage='请设置您的登录密码'

    private registerEmail(){
      this.passwordMessage='请设置您的登录密码'
      let params={
        email:this.emailValue,
        password:this.passwordValue
      }
      getData(this,'post','register',params,(res)=>{
        console.log(res)
        if(res.data.error){
          this.$notify.open({content: res.data.error, type: 'danger',placement:'top-center'});
          return false
        }
        this.emailValue=''
        this.passwordValue=''
        this.$router.push({path:'/login'})
      })
    }
  }
</script>

<style lang="scss">
  @include component(register){
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #054547;

    @include part(container){
      grid-column: 1 / 2 span;
      color: $color-fff;

      p{
        text-align: right;
        @include baseline($font-size-0875,$skip:2);
        a{
          font-size: $font-size-1;
          color: #79cd46;
        }
      }
    }

    @include part(logo){
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: $mobile-row-5 auto;
      overflow: hidden;

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    @include part(form){

      div{
        @include baseline($font-size-1,$skip:1);

        label{
          display: inline-block;
          width: 100%;
          @include loop-breakpoints{
            height: #{$gridel-row-height * 3 + rem};
          }
        }

        input{
          width: 100%;
          border: none;
          outline: none;
          padding-left: 0.5rem;
          @include loop-breakpoints{
            height: #{$gridel-row-height * 3 + rem};
          }
        }
      }
    }

    @include part(button){

      button{
        width:100%;
        border: none ;
        border-radius: 15px;
        outline: none;
        color: black;
        @include loop-breakpoints{
          height: #{$gridel-row-height * 4 + rem};
        }
        &:nth-of-type(1){
          margin-top: $mobile-row-5;
          background: rgb(121, 205, 70);
          &:hover{
            background: rgb(24, 161, 16);
          }
        }
        &:nth-of-type(2){
          margin-top: $mobile-row-1;
        }

      }
    }
  }
</style>
